import React, { PureComponent } from 'react';
import {
  Card,
  Button,
  Form,
  Icon,
  Col,
  Row,
  DatePicker,
  TimePicker,
  Input,
  Select,
  Popover,
} from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import TableForm from './TableForm';
import Editable from '@/components/Editable';

@Form.create()
class EditableForm extends PureComponent{

  validate = () => {
    const {
      form: { validateFieldsAndScroll },
      dispatch,
    } = this.props;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        // submit the values
        console.log(values['users']);
      }
    });
  };

  render(){
    const {
      form: { getFieldDecorator },
      submitting,
    } = this.props;

    const sexEnums = [{'value':'1','alias':'男'}, {'value':'2','alias':'女'}];

    const columns = [{
      title: 'name',
      dataIndex: 'name',
      width: '30%',
      editable: true,
    }, {
      title: 'age',
      dataIndex: 'age',
      editable: true,
      inputType: 'number'
    }, {
      title: 'time',
      dataIndex: 'time',
      editable: true,
      inputType: 'date',
      datePattern: '',
      render: (text, record)=>{ return text && moment(text).format('YYYY-MM-DD HH:mm:ss') }
    }, {
      title: 'boolean',
      dataIndex: 'boolean',
      editable: true,
      inputType: 'checkbox',
      render: (text, record)=>{ return text && text == '1' ? '是' : '否' }
    }, {
      title: '性别',
      dataIndex: 'sex',
      editable: true,
      inputType: 'select',
      selectProps: {
        dataSource: sexEnums,
        valueKey: 'value',
        textKey: 'alias',
      },
      render: (text, record)=>{
        const sex = sexEnums.filter(item=> item.value == record.sex);
        return sex[0].alias;
      }
    }, {
      title: 'address',
      dataIndex: 'address'
    }];

    const dataSource = [{
      key: '0',
      name: 'Edward King 0',
      age: '32',
      time: '2018-09-25',
      boolean: '1',
      sex: '1',
      address: 'London, Park Lane no. 0',
    }, {
      key: '1',
      name: 'Edward King 1',
      age: '32',
      time: '2018-09-25',
      boolean: '0',
      sex: '2',
      address: 'London, Park Lane no. 1',
    }]

    return (
      <PageHeaderWrapper
        title="编辑表格"
        content="高级表单常见于一次性输入和提交大批量数据的场景。">
      <Card title="成员管理" bordered={false}>
        {getFieldDecorator('users', {
          initialValue: dataSource,
        })(<Editable columns={columns} />)}
      </Card>
        <Button type="primary" onClick={this.validate} >
          提交
        </Button>
      </PageHeaderWrapper>

    )
  }
}

export default EditableForm;

